<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Cierres</title>
        <link rel="stylesheet" href="../../js/calendarview/calendarview.css">
        <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css" type="text/css" />
        <style>
            body {
                font-family: Trebuchet MS;
            }
            div.calendar {
                max-width: 240px;
                margin-left: auto;
                margin-right: auto;
            }
            div.calendar table {
                width: 100%;
            }
            div.dateField {
                width: 220px;
                padding: 6px;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                color: #555;
                background-color: white;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
            }
            .popupDateField:hover {
                background-color: #cde;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript" src="../../js/prototype162.js"></script>
        <script type="text/javascript" src="../../js/calendarview/calendarview.js"></script>
        
        <script type="text/javascript">
            function setupCalendars() {
                Calendar.setup(
                {
                    dateField: 'cierreDia',
                    parentElement: 'embeddedCalendar',
                    selectHandler:function(calendar,fecha){
                        $("cierreDia").value=fecha;
                        cargarCierre();
                    }
                }
            );
                // Popup Calendar
                Calendar.setup(
                {
                    dateField: 'desde',
                    triggerElement: 'desdePop',
                    selectHandler:function(calendar,fecha){
                        $('desde').value=fecha;
                    }
                }
            );
                // Popup Calendar
                Calendar.setup(
                {
                    dateField: 'hasta',
                    triggerElement: 'hastaPop',
                    selectHandler:function(calendar,fecha){
                        $("hasta").value=fecha;
                    }
                }
            );
            }
            function cargarCierre(){
                $("contenido").update('<img src="../../img/ajax-loader.gif">');
                new Ajax.Updater('contenido','data.php?operation=get&cierreDia='+$F("cierreDia"));
            }
            function cargarCierres(){
                new Ajax.Updater('contenido',
                'data.php?operation=getT&desde='+$F("desde")+'&hasta='+$F("hasta"));
            }
            function cerrar(param){
                new Ajax.Request("data.php",{onComplete:function(r){
                        alert(r.responseJSON.MSG);
                        cargarCierre();
                    },parameters:$(document.forms[0]).serialize()+"&operation="+param});
            }
            function abrir(param){
                new Ajax.Request("data.php",{onComplete:function(r){
                        alert(r.responseJSON.MSG);
                        cargarCierre();
                    },parameters:$(document.forms[0]).serialize()+"&operation="+param});
            }
            Event.observe(window, 'load',
            function() {
                setupCalendars();
                cargarCierre();
            });
        </script>

    </head>
    <body>
        <form name="forma" action="index.php" id="forma" >
            <div style="float: left; width: 50%">
                <div style="height: 700px; background-color: #efefef; padding: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; margin-right: 10px">
                    <h3 style="text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-top: 0px; margin-bottom: 20px; padding: 8px;font-size: 20px;">Cierre por dia</h3>
                    <div id="embeddedExample" style="">
                        <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
                        </div>
                        <br />
                        <div id="container" class="dateField">
                            <input type="text" id="cierreDia" name="cierreDia" size="10" value="<?= date("Y-m-d") ?>" readonly="readonly">
                        </div>
                        <div id="container" class="dateField">
                            <input type="button" id="refreshbt" onClick="cargarCierre();" name="refreshbt" size="15" value="Actualizar" readonly="readonly" class="btn btn-info">
                        </div>
                        <br />
                    </div>
                    <h3 style="font-size: 20px;text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-top: 0px; margin-bottom: 20px; padding: 8px">Cierre por rango de fechas</h3>
                    <div id="rangos" style="">
                        <div id="desdec">
                            <div id="desdePop" class="dateField popupDateField" style="margin-top: 5px">Desde:
                                <input name="desde" type="text" id="desde" size="8" maxlength="10"> </div>
                        </div>
                        <div id="hastac">
                            <div id="hastaPop" class="dateField popupDateField" style="margin-top: 5px">Hasta: <input
                                    name="hasta" type="text" id="hasta" size="8" maxlength="10"></div>
                        </div>
                        <div id="boton">
                            <div id="botonCont" class="dateField popupDateField" style="margin-top: 5px"><input
                                    class="btn btn-info" name="hasta" type="button" id="buton" size="8" value="Mostrar" onClick="cargarCierres();" ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="float: right; width: 50%">
            <div style="height: 550px; background-color: #efefef; padding: 10px;
                 -webkit-border-radius: 12px; -moz-border-radius: 12px; margin-left: 10px" id="contenido"> </div>
        </div>
    </form>
</body>
</html>